<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{msg}}</div>
            <button @click="update">更新</button>
            <button @click="destroy">销毁</button>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    msg: 'nihao'
                },
                methods: {
                    update: function() {
                        this.msg = 'hello';
                    },
                    destroy: function() {
                        this.$destroy();
                    }
                },
                beforeCreate: function() {
                    console.log('beforeCreate');
                },
                created: function() {
                    console.log('created');
                },
                beforeMount: function() {
                    console.log('beforeMount');
                },
                mounted: function() {
                    console.log('mounted');
                },
                beforeUpdate: function() {
                    console.log('beforeUpdate');
                },
                updated: function() {
                    console.log('updated');
                },
                beforeDestroy: function() {
                    console.log('beforeDestroy');
                },
                destroyed: function() {
                    console.log('destroyed');
                }
            });
        </script>
    </body>
</html>
